<!DOCTYPE html>
<html>
<head>
	<title>Eclipse Mosquitto&trade; Sticker Generator</title>
</head>

<body style="background-color:#dddddd">



<div style="width:500px; text-align:center; margin: 0 auto;">
	<h1>Eclipse Mosquitto&trade; Sticker Generator</h1>

	<p>This page allows you to create a book of square stickers to buy from <a href="http://moo.com/">Moo</a>.</p>
	<p>Click the logos to choose which to include, then click submit to be
	taken to the Moo site with a stickerbook ready in your basket. If you
	choose both logos you will get 45 of each, otherwise you will get 90 of the
	one you choose.</p>

	<span style="margin: 0 auto; width: 200px; text-align: center">
		<img id="mono" src="mosquitto-mono.png" width="100" height="100" onclick="changeImg('mono')">
		<img id="colour" src="mosquitto-colour.png" width="100" height="100" onclick="changeImg('colour')"><br/>
	</span>
	<form action="submit.php" method="get">
		<input type="hidden" id="mono-check" name="mono" value="1">
		<input type="hidden" id="colour-check" name="colour" value="1">
		<input type="submit" value="Submit">
	</form>
</div>

	<script>
		function changeImg(id){
			var img = document.getElementById(id),
				inp = document.getElementById(id+"-check"),
				x = img.src.split("/"),
				t = x.length-1,
				y = x[t];

			if(y.indexOf('deselected') > -1){
				img.src = "mosquitto-"+id+".png";
				inp.value = "1";
			}else{
				img.src = "mosquitto-"+id+"-deselected.png";
				inp.value = "0";
			}
		}
	</script>
</body>
</html>
